<template>
	<div class="allcontainer" style="background-color: #fff;padding: 20px;" v-loading="loading">
		<div id="components-form-demo-advanced-search">
			<div class="h2">附件</div>
		</div>
		<div class="option" v-if="state!=5&&state!=4">
			<a-button v-if="IsManager||ChairmanNo==thisChairmanNo" type="primary" class="btn" @click="addList">上传
			</a-button>
		</div>
		<div class="table">
			<div class="imagecon">
				<div class="imagelist" v-for="(item,i) in data" :key="i">
					<div class="iconcon">
						<img v-if="item.FilePath.indexOf('jpg')>0||item.FilePath.indexOf('png')>0" :src="requestUrl+item.FilePath" />
						<div v-else class="fileicon">{{ item.FilePath.split('.')[1] }}</div>
					</div>
					<div class="title">{{ item.FileName }}</div>
					<div class="oprate">
						<oprateBtn title="下载" icon="icon-xiazai-wenjianxiazai-04" color="#1890FF" @tap="look(item)" ></oprateBtn>
						<oprateBtn title="删除" icon="icon-delete" color="red" v-if="state!=5 &&(IsManager|| ChairmanNo==thisChairmanNo)&&state!=4" @tap="deletemember(item)" ></oprateBtn>
					</div>
				</div>
				<div class="el-table__empty-text" style="margin:0 auto;" v-show="data.length==0">暂无数据</div>
			</div>
			<!-- <el-table ref="singleTable" :data="data" highlight-current-row style="width: 100%">
				<el-table-column type="index" label="序号" width="60" fixed="left"></el-table-column>
				<el-table-column prop="FileName" label="名称" min-width="100">
					<template slot-scope="scope">
						<div style="text-align: left;">
							{{scope.row.FileName}}
						</div>
					</template>
				</el-table-column>
				<el-table-column prop="IsEnable" label="操作" min-width="100" fixed="right">
					<template slot-scope="scope">
						<a-icon title="下载" type="download" style="color: #1890FF;font-size: 20px;"
							@click="look(scope.row)" />
						<i v-if="state!=5 &&(IsManager|| ChairmanNo==thisChairmanNo)&&state!=4" title="删除"
							class="iconfont icon-delete1" style="color: red;" @click="deletemember(scope.row)"></i>
					</template>
				</el-table-column>
			</el-table> -->
			<!-- <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pagination.currentPage"
			 :page-sizes="pagination.pageSizeOptions" :page-size="pagination.pageSize" layout="total, sizes, prev, pager, next, jumper"
			 :total="pagination.total"></el-pagination> -->
		</div>
		<add :ID="ID" v-if="addIf" @closeFun="closeFun"></add>
		<!-- <imgcode :codeID="codeID" :time="time" v-show="codeIf" @closeFun="closeFun"></imgcode> -->
		<!-- <detail :text="detailtext"  v-show="detailIf" @closeFun="closeFun"></detail> -->
	</div>
</template>

<script>
	import Func from '@/utils/func';
	import Cache from '@/utils/cache'
	import {
		UserActivityFile,
		DownUserActivityFile,
		DeleteUserActivityFile,
		UserActivityDetail

	} from '@/api/follow';
	import add from './addEnclosure'
	// import imgcode from './QRcode'
	// import detail from './UserActivitySignDetail'
	const data = [];
	export default {
		components: {
			add,
			// detail,
			// imgcode
		},
		data() {
			return {
				data,
				state: Number(this.$route.query.State) || Number(this.$route.query.state),
				form: this.$form.createForm(this, {
					name: 'advanced_search'
				}),
				pagination: {
					currentPage: 1,
					pageSize: this.global.pageSize,
					pageSizeOptions: this.global.pageSizeOptions, // 每页中显示的数据
					showTotal: total => `共有 ${total} 条数据` // 分页中显示总的数据
				},
				addIf: false,
				text: {},
				detailtext: {},
				codeID: '',
				visible: false,
				confirmLoading: false,
				itemId: '',
				departmentList: [],
				worklist: [],
				loading: false,
				values: {},
				pages: {
					pageIndex: 1,
					pageSize: 20
				},
				tableHeight: parseFloat(window.innerHeight - 160),
				TypeIDList: [],
				DepartCodeList: [],
				ProjectIDList: [],
				ishaveid: true,
				selectList: {},
				showModal: false,
				UserInfo: Cache.get('myInfo'),
				ChairmanNo: this.$route.query.ChairmanNo,
				thisChairmanNo: Cache.get('myInfo').UserNo,
				linktype: 1,
				ID: this.$route.query.ID,
				visible: false,
				deletelist: {},
				time: '',
				codeIf: false,
				detailIf: false,
				IsManager: false,
				requestUrl: this.global.requestUrl,
				token: Cache.get('token'),
			};
		},
		computed: {},
		created() {
			this.getList();
			this.getOtherList()
		},
		mounted() {},
		methods: {
			async getOtherList() {
				let data = {}
				data.id = this.ID
				let res = await UserActivityDetail(data);
				this.IsManager = res.data.data.IsManager
			},
			codeimg(text) {
				// let data={}
				// data.id=text.ID
				// let res= await GetUserActivitySignQRImage(data)
				this.time = new Date()
				this.codeID = text.ID
				this.codeIf = true
			},
			handleCancel(e) {
				this.visible = false
				this.getList()
			},
			deletemember(text) {
				// this.visible = true
				// this.deletelist = text
				let that = this
				this.$confirm({
					title: '提示',
					content: `您确定删除此条记录吗？`,
					okText: '确认',
					cancelText: '取消',
					async onOk() {
						let data = {}
						data.id = text.ID
						let res = await DeleteUserActivityFile(data);
						if (res.data.code == 0) {
							that.getList()
							that.$message.success(res.data.msg)
						} else {
							that.$message.error(res.data.msg)
						}
					}
				})
			},
			detail(text) {
				this.text = text
				this.time = new Date()
				this.addIf = true
			},
			async look(item) {
				let hrefUrl = this.requestUrl + 'User/ActivityFile/DownFile?userToken=' + encodeURIComponent(this
					.token) + '&id=' + item.ID;
				window.open(hrefUrl, '_blank');
			},
			handleChange(val) {
				this.currentRow = val;
				if (val.ID) {
					this.ishaveid = false
					this.selectList = val
				} else {
					this.ishaveid = true
				}
			},
			handleSearch(e) {
				e.preventDefault();
				this.form.validateFields((error, values) => {
					this.pagination.currentPage = 1;
					this.values = values;
					this.getList();
				});
			},
			handleReset() {
				this.form.resetFields();
				this.values = {};
				this.getList();
			},
			handleSizeChange(val) {
				this.pagination.pageSize = val;
				this.getList();
			},
			handleCurrentChange(val) {
				this.pagination.currentPage = val;
				this.getList();
			},
			async getList() {
				this.loading = true;
				let data = {};
				if (this.values) {
					data = this.values;
				}
				data.activityID = this.$route.query.ID
				data.pageIndex = this.pagination.currentPage;
				data.pageSize = this.pagination.pageSize;
				let res = await UserActivityFile(data);
				this.loading = false;
				this.data = res.data.data;
				// const pagination = { ...this.pagination
				// };
				// pagination.total = res.data.pageInfo.TotalItemCount;
				// this.pagination = pagination;
			},
			// async getOtherList() {
			// 	let res = await UserUpdateActivity()
			// 	this.TypeIDList = res.data.data
			// },
			addList() {
				this.addIf = !this.addIf;
			},
			modifyList(text) {
				text = Object.assign(text, {
					time: new Date()
				});
				this.addIf = !this.addIf;
				this.text = text;
			},
			closeFun(index) {
				this.showModal = false
				this.addIf = false
				this.detailIf = false
				this.codeIf = false
				this.getList()
			},
		}
	};
</script>

<style lang="less" scoped>
	.imagecon {
		display: flex;
		flex-wrap: wrap;

		.imagelist {
			width: 140px;
			height: 180px;
			text-align: center;
			margin: 10px;
			position:relative;

			.iconcon {
				width: 140px;
				height: 140px;
				display: flex;
				justify-content: center;
				border-radius:10px;
				overflow: hidden;
				padding:5px;
			}

			.fileicon {
				width: 100px;
				height: 120px;
				color:#fff;
				font-weight: bold;
				font-size:20px;
				padding-top:34px;
				background: #ffc934;
				border-radius: 8px;
				background: linear-gradient(-135deg, transparent 15px, #48b0ff 0);
				position: relative;

				&::before {
					content: '';
					position: absolute;
					font-size:14px;
					right: 0;
					top: 12px;
					width: 22px;
					height: 22px;
					background: linear-gradient(to left bottom, transparent 50%, rgba(0, 0, 0, 0.2) 0, rgba(0, 0, 0, 0.3)) 100% 0 no-repeat;
					transform: translateY(-0.85em) rotate(0deg);
					transform-origin: bottom right;
					box-shadow: -.2em .2em .3em -.1em rgba(0, 0, 0, .15);
					border-bottom-left-radius: inherit;
					/* 左下角继承border-radius */
				}
			}

			img {
				// width: 130px;
				// height: 130px;
				// min-width: 130px;
				// min-height: 130px;
				border-radius:10px;
				
			}

			.title {
				height:40px;
				line-height: 20px;
				display: -webkit-box;
				overflow: hidden;
				-webkit-line-clamp: 2;
				-webkit-box-orient: vertical;
				font-size: 12px;
				    color: #03081a;
			}
			.oprate{
				position:absolute;
				bottom:50px;
				left:0px;
				z-index:9;
				width:100%;
				height:30px;
				line-height:30px;
				background: rgba(255,255,255,0.3);
			}
		}
	}
</style>
